<!--
 * @Author: your name
 * @Date: 2020-11-12 17:13:08
 * @LastEditTime: 2020-11-21 10:16:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-beautiful-pro-template\src\views\verification\index.vue
-->
<template>
  <div class="verification-container">
    <el-form
      ref="form"
      class="form"
      :model="form"
      label-width="150px"
      size="medium"
      label-position="right"
      :rules="rules"
      style="width: 30%"
    >
      <el-form-item label="用户名:" prop="name">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="电话(移):" prop="phone">
        <el-input v-model.number="form.phone" disabled></el-input>
      </el-form-item>
      <el-form-item label="招生顾问名称:" prop="counselorName">
        <el-input v-model="form.counselorName"></el-input>
      </el-form-item>
      <el-form-item label="头像:" prop="avatarArray">
        <el-upload
          class="avatar-uploader"
          action="#"
          list-type="picture-card"
          :file-list="form.avatarArray"
          :limit="1"
          accept="image/jpg, image/jpeg,image/png"
          :auto-upload="false"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            建议上传1:1尺寸图片，避免显示不全
            <strong style="color: red">(只能上传一张图片)</strong>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="微信二维码:" prop="codeArray">
        <el-upload
          class="avatar-uploader"
          action="#"
          list-type="picture-card"
          :file-list="form.codeArray"
          :limit="1"
          accept="image/jpg, image/jpeg,image/png"
          :auto-upload="false"
          :on-exceed="handleExceed"
          :on-change="handleChange2"
          :on-remove="handleRemove2"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">
            建议上传1:1尺寸图片，避免显示不全
            <strong style="color: red">(只能上传一张图片)</strong>
          </div>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="所属地区:" prop="origin">
        <el-input v-model="form.origin" disabled></el-input>
      </el-form-item>
      <el-form-item label="成为招生顾问日期:" prop="date">
        <el-input v-model="form.date" disabled></el-input>
      </el-form-item> -->
    </el-form>

    <div class="bottom">
      <el-button type="primary" @click="submit">立即提交</el-button>
      <el-button v-show="showbtn" type="primary" @click="dialogVisible = true">
        关注公众号
      </el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      height="30%"
      title="提交成功"
    >
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <p>
          <i class="el-icon-warning-outline" style="margin-right: 10px"></i>
          提交成功，待关注公众号
        </p>
        <img :src="ShowCode" alt="" class="showcode" />
        <p>华泰教育集团</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import { baseURL } from '@/config'
  import { checkUserInfo, showCode } from '@/api/common'
  import { mapGetters } from 'vuex'
  import { addCounselor, checkCounselorInfo } from '@/api/conunselor'
  import { transformFormdata, imageUrl } from '@/utils/validate'

  export default {
    data() {
      return {
        form: {
          name: '',
          phone: '',
          counselorName: '',
          origin: '',
          date: moment().locale('zh-cn').format('LL'),
          avatarArray: [],
          codeArray: [],
        },
        dialogVisible: false,
        showbtn: false,
        rules: {
          counselorName: [
            { required: true, message: '请输入招生顾问名称', trigger: 'blur' },
            {
              min: 1,
              max: 30,
              message: '长度在 1 到 30 个字符',
              trigger: 'blur',
            },
          ],
          phone: [{ required: true, message: '请输入电话号码' }],
          avatarArray: [{ required: true, message: '请上传头像照片' }],
          codeArray: [{ required: true, message: '请上传二维码照片' }],
        },
        params: {
          imageUrl: '',
          wxCodeUrl: '',
          dcName: '',
          id: '',
        },
        loading: '',
        avatarFile: '',
        codeFile: '',
      }
    },
    computed: {
      ...mapGetters({
        routes: 'routes/routes',
      }),
      ShowCode() {
        return `${baseURL}/weChat/wxQrcode.do?id=${this.params.id}`
      },
    },
    mounted() {
      this.checkUserInfo()
    },
    methods: {
      checkUserInfo() {
        const params = this.$route.query
        checkUserInfo(params).then((res) => {
          if (res.code === 200) {
            this.$store.dispatch('user/setAccessToken', res.data.token)
            localStorage.setItem('user', JSON.stringify(res.data))
            // 查询招生顾问的信息
            checkCounselorInfo({
              user: res.data.username,
            }).then((res) => {
              if (res.code === 200) {
                this.form.name = res.data.userName
                this.form.phone = res.data.mobilePhone
                this.form.counselorName = res.data.dcName
                this.params.id = res.data.id
                if (res.data.imgUrl) {
                  this.form.avatarArray.push({ url: imageUrl(res.data.imgUrl) })
                }

                if (res.data.wxCode) {
                  this.form.codeArray.push({ url: imageUrl(res.data.wxCode) })
                }
                if (res.data.imgUrl && res.data.wxCode) {
                  localStorage.setItem('isLogin', true)
                  // this.dialogVisible = true
                }
              } else {
                this.$baseMessage(res.msg, 'warning')
              }
            })
          } else if (res.code === 401) {
            this.$baseMessage(res.msg, 'warning')
          }
        })
      },
      handleExceed() {
        this.$baseMessage('上传文件已经超过了一张', 'warning')
      },
      handleChange(data) {
        this.avatarFile = data.raw
        this.form.avatarArray.push({ url: data.url })
      },
      handleChange2(data) {
        this.codeFile = data.raw
        this.form.codeArray.push({ url: data.url })
      },
      handleRemove() {
        this.form.avatarArray.pop()
      },
      handleRemove2() {
        this.form.codeArray.pop()
      },
      showWxCode() {
        showCode().then((res) => {})
      },
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.params.imageUrl = this.avatarFile
            this.params.wxCodeUrl = this.codeFile
            this.params.dcName = this.form.counselorName
            addCounselor(transformFormdata(this.params)).then((res) => {
              if (res.code === 200) {
                this.$baseMessage('成为招顾成功', 'success')
                this.showbtn = true
              } else {
                this.$baseMessage(res.msg, 'warning')
              }
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .verification-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0;

    .bottom {
      margin-top: 50px;

      button {
        margin-right: 20px;
      }
    }

    .avatar-uploader .avatar-uploader-icon {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;

      &:hover {
        border-color: #409eff;
      }
    }

    .avatar-uploader-icon {
      width: 178px;
      height: 178px;
      font-size: 28px;
      line-height: 178px;
      color: #8c939d;
      text-align: center;
    }

    .avatar {
      display: block;
      width: 178px;
      height: 178px;
    }

    .showcode {
      width: 400px;
      height: 400px;
    }
    ::v-deep {
      .el-dialog__header {
        border-bottom: 1px solid #f5f5f5;
      }
    }
  }
</style>
